<template>
	<div class="cartcontrol">
		<div class="cart-decrease" v-show="food.count>0" @click.stop.prevent="minusCart($event)" transition="move">
			<span class="inner icon-remove_circle_outline">-</span>
		</div>
		<div class="cart-count icon-add_circle" v-show="food.count>0">{{food.count}}</div>
		<div class="cart-add" @click.stop.prevent="addCart($event)">+</div>
	</div>
</template>

<script>
	import Vue from 'vue';
	export default {
		props:{
			food:{
				type:Object
			}
		},
		created(){

		},
		methods:{
			addCart(event){
				if(!event._constructed){
					return;
				}
				if(!this.food.count){
					Vue.set(this.food,'count',1);
				}else{
					this.food.count ++;
				}
				console.log(this.food.count);
				this.$dispatch('cart.add',event.target);
			},
			minusCart(event){
				if(!event._constructed){
					return;
				}
				if(this.food.count>=2){
					this.food.count --;
				}
				console.log(this.food.count);
			}
		}
	}
</script>

<style>
.cartcontrol{
	font-size: 0;
}
.cart-decrease{
	display: inline-block;
	padding: 6px;
}
.move-transition{
	opacity: 1;
	transform: translate3d(0,0,0);
	transition:all 0.4s linear;
}
.move-transition .inner{
	color: rgb(0,160,220);
	line-height: 24px;
	font-size: 24px;
	display: inline-block;
	transition: all .4s linear;
	transform: rotate(0deg);
}
.move-enter,.move-leave{
	opacity: 0;
	transform: translate3d(24px,0,0);
}
.move-enter .inner,.move-leave .inner{
	transform: rotate(180deg);
}
.cart-count{
	display: inline-block;
	vertical-align: top;
	width: 12px;
	padding-top: 6px;
	line-height: 24px;
	text-align: center;
	font-size: 10px;
	color: rgb(147,153,159);
}
.cart-add{
	display: inline-block;
	line-height: 24px;
	font-size: 24px;
	padding: 6px;
	color: rgb(0,160,220);
}
</style>